<template>
  <view class="feedback-page">
    <view class="form-container">
      <!-- 问题类型 -->
      <view class="form-item">
        <text class="item-label">问题类型</text>
        <picker mode="selector" :range="problemTypes" @change="handleTypeChange">
          <view class="picker">
            {{ selectedType || '请选择问题类型' }}
          </view>
        </picker>
      </view>

      <!-- 反馈描述 -->
      <view class="form-item">
        <text class="item-label">反馈描述</text>
        <textarea class="feedback-input" placeholder="请输入反馈内容（200字以内）" maxlength="200" v-model="feedbackText" />
      </view>

      <!-- 相关图片 -->
      <view class="form-item">
        <text class="item-label">相关图片（最多9张）</text>
        <view class="image-uploader">
          <view class="image-item" v-for="(item, index) in imageList" :key="index">
            <image :src="item" class="preview-image" />
            <view class="delete-icon" @click="removeImage(index)">×</view>
          </view>
          <view class="upload-btn" @click="chooseImage" v-if="imageList.length < 9">
            +
          </view>
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="form-item">
        <text class="item-label">联系方式</text>
        <input type="text" placeholder="请输入手机/邮箱" v-model="contactInfo" class="contact-input"
          @input="validateContact" />
        <text class="error-text" v-if="contactError">{{ contactError }}</text>
      </view>


      <button class="submit-btn"  @click="submitFeedback">
        提交反馈
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { FeedbackForm } from '@/types/feedback'

const problemTypes = ['功能问题', '界面问题', '内容问题', '其他问题']
const selectedType = ref('')
const feedbackText = ref('')
const imageList = ref<string[]>([])
const contactInfo = ref('')
const contactError = ref('')
const validateContact = () => {
  const phoneReg = /^1[3-9]\d{9}$/
  const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

  if (!contactInfo.value) {
    contactError.value = ''
  } else if (!phoneReg.test(contactInfo.value) && !emailReg.test(contactInfo.value)) {
    contactError.value = '请输入正确的格式'
  } else {
    contactError.value = ''
  }
}


const handleTypeChange = (e: any) => {
  selectedType.value = problemTypes[e.detail.value]
}

const chooseImage = async () => {
  try {
    const res = await uni.chooseImage({
      count: 9 - imageList.value.length,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera']
    })
    imageList.value = [...imageList.value, ...res.tempFilePaths]
  } catch (err) {
    console.error('选择图片失败', err)
  }
}

const removeImage = (index: number) => {
  imageList.value.splice(index, 1)
}

const submitFeedback = () => {
  console.log('请完善反馈信息' + selectedType.value + '' + feedbackText.value)
  // 基础必填项验证
  if (selectedType.value === '' || feedbackText.value === '') {
    
    uni.showToast({ title: '请完善反馈信息', icon: 'none' })
    return
  }

  // 强制触发联系方式验证
  validateContact()
  
  // 联系方式格式验证
  if (contactError.value) {
    uni.showToast({ title: '请检查联系方式格式', icon: 'none' })
    return
  }

  // 原有提交逻辑
  const formData: FeedbackForm = {
    
  type: selectedType.value,
  content: feedbackText.value.trim(),
  images: imageList.value,
  contact: contactInfo.value
}
  
  uni.showToast({
    title: '提交成功',
    icon: 'success'
  })
  
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}

</script>

<style lang="scss" scoped>
.feedback-page {
  padding: 30rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.form-container {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx 30rpx 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(110, 195, 244, 0.10), 0 1.5rpx 4rpx rgba(0, 0, 0, 0.04);
  position: relative;
  margin-top: 40rpx;
}
.form-container.data-v-956504ee::before {
  content: "";
  display: block;
  position: absolute;
  left: 30rpx; right: 30rpx; top: 0;
  height: 8rpx;
  border-radius: 8rpx 8rpx 0 0;
  background: linear-gradient(90deg, #8e7fff 0%, #6ec3f4 100%);}
.form-item {
  border: 2rpx solid #e3e8ff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(110, 195, 244, 0.08);
  background: #fafdff;
  position: relative;
  transition: box-shadow 0.3s, border 0.3s;
  .form-item.data-v-956504ee:focus-within {
  border: 2rpx solid #8e7fff;
  box-shadow: 0 4rpx 16rpx rgba(110, 195, 244, 0.12);
}
  
  .item-label {
    display: block;
    font-size: 32rpx;
     color: #6e7fff;
    font-weight: 600;
    margin-bottom: 18rpx;
    letter-spacing: 1rpx;
}
.error-text {
  color: #ff4444;
  font-size: 24rpx;
  margin-top: 10rpx;
  display: block;
}
}

.picker {
  height: 80rpx;
  line-height: 80rpx;
  border: 1rpx solid #e3e8ff;
  border-radius: 10rpx;
  padding:  20rpx;
  color: #555;
  background: #f5f7fa;
  transition: border 0.3s;
}
.picker.data-v-956504ee:focus {
  border: 1rpx solid #8e7fff;
}
.image-uploader {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  
  .image-item {
    width: 200rpx;
    height: 200rpx;
    position: relative;
     border: 2rpx dashed #8e7fff;
    border-radius: 12rpx;
    background: #f5f7fa;
    transition: border 0.3s;
    
    .preview-image {
      width: 100%;
      height: 100%;
      border-radius: 8rpx;
    }
    
    .delete-icon {
      position: absolute;
      right: -10rpx;
      top: -10rpx;
      width: 40rpx;
      height: 40rpx;
      background: linear-gradient(135deg, #ff7e7e 0%, #ffb199 100%);
      color: #fff;
      border: 2rpx solid #fff;
      box-shadow: 0 2rpx 8rpx rgba(255, 126, 126, 0.15);
      border-radius: 50%;
      text-align: center;
      line-height: 40rpx;
      font-size: 36rpx;
    }
  }
    
    
  .upload-btn {
    width: 200rpx;
    height: 200rpx;
    border: 2rpx dashed #8e7fff;
    border-radius: 12rpx;
    background: linear-gradient(135deg, #e9eafc 0%, #f3f6fd 100%);
    color: #8e7fff;
    font-size: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border 0.3s, background 0.3s;
  }
}

.submit-btn {
  background: linear-gradient(90deg, #8e7fff 0%, #6ec3f4 100%);
  color: #fff;
  border-radius: 16rpx;
  margin-top: 40rpx;
  font-size: 32rpx;
  font-weight: 600;
  box-shadow: 0 4rpx 16rpx rgba(110, 195, 244, 0.15);
  transition: background 0.3s;
  
  
  &[disabled] {
    background: #c3cfe2;
    color: #fff;
  }
}
</style>
